<template>
  <hu-card :pb='0' class="box_card" v-show="MixinSelectShow">
    <el-row v-loading="MixinLoading" :gutter="0">
      <el-col class="left_col" :span="5">
        <div class="user_top">
          <div class="user_img">
            <el-image v-if="userInfor.headPortraitPath" fit="cover" class="tent_image" :src="$config.imgUrl+userInfor.headPortraitPath" :preview-src-list="[$config.imgUrl+userInfor.headPortraitPath]">
            </el-image>
            <img v-else class="tent_image" src="@/assets/images/morenImg.png">
          </div>
          <div class="con">

            <div class="flex">
              <el-button plain style="width: 200px;" round type="primary"><span>{{userInfor.name}}</span> <span style="padding-left: 10px;">{{userInfor.code}}</span></el-button>
            </div>
            <div class="flex">
              <el-button round style="width: 200px;" type="primary">{{userInfor.orgName}}</el-button>
            </div>
          </div>
        </div>
        <div class="tabs">
          <div v-for="item in tabList" :key="item.id" @click="chickTabs(item.id, item.disabled)" :class="[item.id == indexTabs ? 'tabs_list' : 'tabs_list2', item.disabled ? 'disabled' : '']">
            {{item.name}}
          </div>
        </div>
      </el-col>
      <el-col class="r_col" :span="19">
        <!-- 人员档案基本信息 -->
        <template v-if="indexTabs === '0'">
          <el-form ref="formOwn" :model="userInfor" :rules="rulesData" :disabled="formDisabled" label-width="0px">
            <el-descriptions :column="3" :labelStyle="labelStyle" :contentStyle="contentStyle" title="基本信息" class="user_card">
              <el-descriptions-item label="工号">
                <el-form-item prop="code">
                  <el-input v-model="userInfor.code" style="width: 100%" placeholder="请输入用户工号"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="姓名">
                <el-form-item prop="name">
                  <el-input style="width: 100%" v-model="userInfor.name" placeholder="请输入用户名称" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                <el-form-item prop="gender">
                  <el-select style="width: 100%" v-model="userInfor.gender" placeholder="请选择性别">
                    <el-option v-for="dict in sexList" :key="dict.label" :value="dict.label" :label="dict.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="组织机构">{{userInfor.directOrgName}}</el-descriptions-item>
              <el-descriptions-item label="身份证号">
                <el-form-item>
                  <el-input v-model="userInfor.identityCardNo" style="width: 100%" placeholder="请输入身份证"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="出生年月">
                <el-form-item>
                  <el-date-picker :value="birthDate" disabled type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始日期">
                  </el-date-picker>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="专业">
                <el-form-item prop="speciality">
                  <el-select style="width: 100%" v-model="userInfor.speciality" placeholder="请选择专业">
                    <el-option v-for="dict in dict.type.zy" :key="dict.value" :value="dict.value" :label="dict.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="岗位">
                <el-form-item prop="post">
                  <el-select style="width: 100%" v-model="userInfor.postName" placeholder="请选择岗位">
                    <el-option v-for="dict in dict.type.gw" :key="dict.value" :label="dict.label" :value="dict.value" @click.native="setPositionId(dict)">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="职称">
                <el-form-item prop="title">
                  <el-select style="width: 100%" v-model="userInfor.title" placeholder="请选择职称">
                    <el-option v-for="dict in dict.type.zc" :key="dict.value" :value="dict.value" :label="dict.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="执业资格">
                <el-form-item prop="professional">
                  <el-select style="width: 100%" v-model="userInfor.professional" placeholder="请选择职业资格">
                    <el-option v-for="dict in dict.type.zyzg" :key="dict.value" :value="dict.value" :label="dict.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="政治面貌">
                <el-form-item prop="outLook">
                  <el-select style="width: 100%" v-model="userInfor.outLook" placeholder="请选择政治面貌">
                    <el-option v-for="dict in dict.type.zzmm" :key="dict.value" :value="dict.value" :label="dict.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="3" title="教育背景" :labelStyle="labelStyle" :contentStyle="contentStyle" class="user_card">
              <el-descriptions-item label="毕业学校">
                <el-form-item prop="graduateSchool">
                  <el-input v-model="userInfor.graduateSchool" placeholder="请输入毕业院校"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="学历">
                <el-form-item prop="educationName">
                  <el-select style="width: 100%" v-model="userInfor.educationName" placeholder="请选择学历">
                    <el-option v-for="dict in dict.type.xl" :key="dict.value" :label="dict.label" :value="dict.value" @click.native="setEducationId(dict)">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="毕业日期">
                <el-form-item prop="graduateDate">
                  <el-date-picker v-model="userInfor.graduateDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="毕业日期">
                  </el-date-picker>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="附件">
                <el-form-item prop="educationFiles">
                  <div>
                    <f-upload style="display: flex; flex-direction: column;" accept="" :fileList.sync="userInfor.educationFiles" @remove="removeFile"></f-upload>
                  </div>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="3" title="联系信息" :labelStyle="labelStyle" :contentStyle="contentStyle" class="user_card">
              <el-descriptions-item label="手机号">
                <el-form-item prop="phoneNo">
                  <el-input v-model="userInfor.phoneNo" placeholder="请输入手机号"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="固定电话">
                <el-form-item prop="fixedPhoneNo">
                  <el-input v-model="userInfor.fixedPhoneNo" placeholder="请输入固定电话"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="传真">
                <el-form-item prop="fax">
                  <el-input v-model="userInfor.fax" placeholder="请输入传真"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="地址">
                <el-form-item prop="address">
                  <el-input v-model="userInfor.address" placeholder="请输入地址"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="邮编">
                <el-form-item prop="postCode">
                  <el-input v-model="userInfor.postCode" placeholder="请输入邮编"></el-input>
                </el-form-item></el-descriptions-item>
              <el-descriptions-item label="邮箱地址">
                <el-form-item prop="email">
                  <el-input v-model="userInfor.email" style="width: 100%" placeholder="请输入邮箱地址"></el-input>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="2" title="用户权限" :labelStyle="labelStyle" :contentStyle="contentStyle" class="user_card">
              <el-descriptions-item label="组织权限">
                <el-tag style="margin-right: 7px;" v-for="item in userInfor.orgScopeName" :key="item.id">{{item.name}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="角色">

                <el-tag style="margin-right: 7px;" v-for="item in userInfor.roles" :key="item.id">{{item.name}}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="2" title="操作日志" :labelStyle="labelStyle" :contentStyle="contentStyle" class="user_card">
              <el-descriptions-item label="创建人">{{userInfor.createUserName}}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{userInfor.ctime}}</el-descriptions-item>
              <el-descriptions-item label="修改人">{{userInfor.updateUserName}}</el-descriptions-item>
              <el-descriptions-item label="修改时间">{{userInfor.utime}}</el-descriptions-item>
            </el-descriptions>
          </el-form>
          <div style="display: flex; justify-content: flex-end; padding-right: 5px; padding-bottom: 10px;">
            <el-button style="margin: 0 5px;width: auto !important;" type="primary" @click="compile">编辑</el-button>
            <el-button style="width: auto !important;margin: 0 5px;" type="primary" @click="submitForm">保存</el-button>
          </div>

        </template>
        <!-- 修改密码 -->
        <template v-else-if="indexTabs === '1'">
          <div class="card_item">
            <div class="card_title">修改密码</div>
            <div class="card_tent">
              <el-form ref="form" :model="user" :rules="rules" label-width="80px">
                <el-form-item label="旧密码" style="margin-bottom: 20px;" prop="oldPassword">
                  <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword" style="margin-bottom: 20px;">
                  <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword" style="margin-bottom: 20px;">
                  <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" show-password />
                </el-form-item>
                <p style="color: #b7b7b7;padding-left: 80px;margin-bottom: 10px">新密码长度不小于10个字符，必须同时包含大写字母（A-Z）、小写字母（a-z）、数字（0-9）、特殊字符及标点符号。</p>
                <el-form-item>
                  <div style="height: 80px; position: relative">
                    <div class="rightDiv">
                      <el-button type="primary" icon="el-icon-plus" @click="submit">保存</el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
      </el-col>
    </el-row>
  </hu-card>
</template>

<script>
import userAvatar from "./userAvatar";
import { userEdit, updateUserPwd } from "@/api/system/user.js";

export default {
  name: "Profile",
  components: { userAvatar },
  dicts: ["zy", "gw", "zc", "zyzg", "zzmm", "xl"],
  data() {
    return {
      formDisabled: true,
      labelStyle: {
        display: "flex",
        "align-items": "center",
        width: "65px",
        "justify-content": "flex-end",
      },
      contentStyle: {
        width: "230px",
      },
      formData: {},
      total: 0,
      rulesData: {
        name: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "用户工号不能为空", trigger: "blur" },
        ],
        identityCardNo: [
          { required: true, message: "身份证不能为空", trigger: "blur" },
        ],
      },
      tableCol: [
        {
          title: "状态",
          slot: "isQualified",
          minWidth: "60",
        },
        {
          title: "序号",
          type: "index",
          width: "55",
        },
        {
          title: "工号编码",
          key: "personTypeCode",
          // showOverflowTooltip: false,
        },
        {
          title: "工种名称",
          key: "ticketTypeName",
        },
        {
          title: "证件编号",
          key: "specialCardNo",
        },
        {
          title: "有效期开始时间",
          key: "specialCardEffectStart",
          minWidth: "120",
        },
        {
          title: "有效期结束时间",
          key: "specialCardEffectEnd",
          minWidth: "120",
        },
        {
          title: "从事年限",
          key: "workYears",
        },
        {
          title: "验审人",
          key: "checkerName",
        },
        {
          title: "创建人",
          key: "cuserName",
        },
        {
          title: "创建时间",
          key: "ctime",
          minWidth: "150",
        },
      ],
      tableData: [], // table Data
      tableData4: [], // table Data
      sexList: [
        {
          value: "男",
          label: true,
        },
        {
          value: "女",
          label: false,
        },
      ],
      indexTabs: "0",
      show: false,
      userInfor: {},
      tabList: [
        {
          name: "基本信息",
          id: "0",
        },
        {
          name: "修改密码",
          id: "1",
        },
      ],

      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    userId() {
      return this.$store.getters.userInfo.id;
    },
    birthDate() {
      let num = "";
      if (
        this.userInfor.identityCardNo &&
        this.userInfor.identityCardNo.length > 15
      ) {
        let date = this.userInfor.identityCardNo.slice(6, 14);
        num =
          date.slice(0, 4) + "-" + date.slice(4, 6) + "-" + date.slice(6, 8);
      } else {
        num = "";
      }
      return num;
    },
  },
  created() {
    this.getList();
  },
  methods: {
    compile() {
      this.formDisabled = false;
    },
    submitForm() {
      this.$refs["formOwn"].validate((valid) => {
        if (valid) {
          const httpRow = {
            ...this.userInfor,
          };
          const formData = new FormData();
          for (const key in httpRow) {
            if (httpRow[key] || httpRow[key] == 0) {
              if (key === "educationFiles") {
                httpRow[key].forEach((item) => {
                  if (!item.id) {
                    formData.append(key, item.raw);
                  }
                });
              } else {
                formData.append(key, httpRow[key]);
              }
            }
          }
          userEdit(formData).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.getList0();
          });
        }
      });
    },
    removeFile(arr) {
      if (!arr[0].raw) {
        if (!this.userInfor.removeEducationFileIds) {
          this.userInfor.removeEducationFileIds = [];
        }
        this.userInfor.removeEducationFileIds.push(arr[0].id);
      }
    },
    // 设置学历ID
    setEducationId(dict) {
      this.$set(this.userInfor, "education", dict.value);
    },
    // 设置岗位ID
    setPositionId(dict) {
      this.$set(this.userInfor, "post", dict.value);
    },
    getList() {
      // this.MixinLoading = true;
      this["getList" + this.indexTabs]();
    },
    getList0() {
      this.$http.getUserInfor(this.userId).then(({ result }) => {
        const item = this.searchTree([result.dataScope]);
        const data = this.returnHome(item);
        this.userInfor = {
          ...result,
          educationFiles: result.files ? result.files : [],
          orgScopeName: data,
        };
        this.formDisabled = true;
        this.MixinLoading = false;
      });
    },
    getList1() {
      this.MixinLoading = false;
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.user.confirmPassword !== this.user.newPassword)
            return this.$modal.msg("新密码与确认密码不一致");
          let form = {
            oldPassword: this.user.oldPassword,
            newPassword: this.user.newPassword,
            userId: this.userId,
          };
          updateUserPwd(form).then((response) => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    chickTabs(index, disabled) {
      if (disabled) return;
      if (this.indexTabs === index) return;
      this.indexTabs = index;
      this.getList();
    },
    searchTree(array, levelName = "level", childrenName = "childs") {
      if (!Array.isArray(array)) return [];
      const recursive = (array, level = 0) => {
        level++;
        return array.map((v) => {
          if (level === 3) {
            v.id = `${v.id}-item`;
          }
          v[levelName] = level;
          const child = v[childrenName];
          if (child && child.length) recursive(child, level);
          return v;
        });
      };
      return recursive(array);
    },
    // 回填 组织权限
    returnHome(array) {
      const arr = [];
      if (!Array.isArray(array)) return [];
      const recursive = (array, level = 0) => {
        array.forEach((v) => {
          if (v.choose === 1) {
            arr.push(v);
            if (v.level === 1 || v.level === 2) return;
          }
          const child = v["childs"];
          if (child && child.length) recursive(child, level);
          return v;
        });
        return arr;
      };
      return recursive(array);
    },
  },
};
</script>
<style lang="scss" scoped>
.box_card {
  height: calc(100vh - 150px);
  overflow: auto;
}
.app-container {
  padding: 0 10px 0 10px !important;
}
.el-card.is-always-shadow {
  height: 85vh !important;
}
.list-group-item {
  padding: 20px 0px;
}
.list-group {
  width: 60%;
  margin: auto;
}
.left_col {
  border-right: 1px solid #eaeaea;
  text-align: center;
  // padding: 20px;
  .user_top {
    .con {
      padding: 10px;
      padding-bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .flex {
      display: flex;
      text-align: left;
      margin-bottom: 10px;
      div {
        width: 140px;
        padding: 0 5px;
      }
    }
  }
  .tabs {
    padding: 20px;
    padding-top: 10px;
    .disabled {
      cursor: no-drop !important;
      background: #ebeef3;
      &:hover {
        color: #565656 !important;
        background: #e9e9e9 !important;
        border: 1px solid #eaeaea !important;
      }
    }
    .tabs_list {
      cursor: pointer;
      background: #f4f8ff;
      border: 1px solid #195fff;
      margin-bottom: 10px;
      padding: 10px;
      color: #195fff;
      transition: 0.3s;
      &:hover {
        color: #195fff;
        background: #eaf0fc;
        border: 1px solid #1359fd;
      }
    }
    .tabs_list2 {
      cursor: pointer;
      border: 1px solid #eaeaea;
      margin-bottom: 10px;
      padding: 10px;
      transition: 0.3s;
      &:hover {
        color: #195fff;
        background: #eaf0fc;
        border: 1px solid #1359fd;
      }
    }
  }
}
.r_col {
  ::v-deep .el-form-item {
    margin: 0 !important;
  }
  ::v-deep .el-upload-list {
    margin-top: 40px;
  }
  .user_card {
    border: 1px solid #eaeaea;
    padding: 10px;
    margin: 10px;
  }
  .card_item {
    border: 1px solid #eaeaea;
    margin: 10px;
  }
  .card_title {
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
  }
  .card_tent {
    padding: 10px;
  }
}
.circle1 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #34c724;
}
.circle2 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ffba01;
}
.circle3 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ff0000;
}

.tent_image {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}
</style>
